<template>
	<view>
		<view class="top_box common_box">
			<view class="topheader"></view>
			<view style="padding: 30rpx;">
				<view class="title">中医介绍</view>
				<view class="cate_list flex fjb">
					<view class="cate_user flex flexColumn fcenter"
						v-for="(item, index) in doctorList" :key="item.id" @click="toPage(`/subpkg/doctorIntro/doctorIntro?id=${item.id}`)">
						<image class="cate_icon" :src="item.image ? item.image : '/static/logo.png'" mode=""></image>
						<view class="cate_user_name">{{ item.name }} {{ item.professionalTitle }}</view>
						<view class="cate_user_addr">{{ item.hospital }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="main_box common_box">	
			<view class="topheader"></view>
			<view style="padding: 30rpx;">
				<view style="font-size: 32rpx;color: #000000;">用药知识</view>
				<view class="list_box" v-if="list.length">
					<view class="card_item flex" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
						<view class="right" v-if="item.uploadType == 1">
							<image src="/static/video_img.png" mode=""></image>
							<view class="video_text flex fcenter">
								<view class="video_text_box">
									{{ item.topicTitle }}
								</view>
							</view>
						</view>
						<view class="right" v-else>
							<video :controls="false" :show-fullscreen-btn="false" :show-play-btn="false" v-if="item.videoUrl"
								:show-center-play-btn="false" :src="item.videoUrl"></video>
						</view>
						<view class="left flex fjb flexColumn">
							<view>
								<view class="title">{{ item.topicTitle }}</view>
								<view class="username">{{ item.doctorName }}</view>
							</view>
							<view class="flex fjb alignC">
								<view class="cate">类别：{{ item.categoryName }}</view>
								<view class="viewBtn flex fcenter">立即查看</view>
							</view>
						</view>
					</view>
					
				</view>
				<view class="empty_box" v-else>
					<image src="/static/empty.png" mode=""></image>
					<text>暂无内容</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		queryListByPageApi,
		queryCategoryListApi
	} from "@/common/api/articleApi.js"
	import { getDictListApi } from '@/common/api/dictApi.js'
	import { getCateVideoListApi } from '@/common/api/lectureApi.js'
	import {
		getdeptListApi
	} from '@/common/api/lectureApi.js'
	import {
		getDoctorListApi
	} from '@/common/api/doctorApi'
	export default {
		data() {
			return {
				list: [],
				pageNum: 1,
				pageSize: 10,
				total: 0,
				doctorList: [],
				dictObj: {}
			}
		},
		onLoad() {},
		async onShow() {
			await this.getDictObj('安全用药')
			await this.initList()
			this.doctorList = []
			await this.getDoctorList()
		},
		async onPullDownRefresh() {

		},
		async onReachBottom() {
			if (this.list.length >= this.total) {
				return uni.$showMsg('已经到底了')
			}
			this.pageNum = this.pageNum + 1
			await this.listByPage()
		},
		methods: {
			initList() {
				this.list = []
				this.total = 0
				this.isShow = false
				this.pageNum = 1
				this.listByPage()
			},
			async listByPage() {
				console.log(this.dictObj[0],'this.dictObj.dictKey')
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					uploadClassify: this.dictObj[0].dictKey,
					doctorName: '',
					topicTitle: ''
				}
				const res = await getCateVideoListApi(params)
				if (res.status == 200) {
					this.list.push(...res.data.records)
					if (this.list.length > 0) {
						this.isShow = true
					}
					this.total = res.data.total
					
				}
			},
			async getDictObj(name) {
				let res = await getDictListApi('videoType')
				console.log(res)
				if(res.status == 200) {
					this.dictList = res.data[0].dictList
					console.log(this.dictList)
					this.dictObj = this.dictList.filter(item=> item.dictValue == name)
				}
			},
			// 获取医生列表
			async getDoctorList() {
				const res = await getDoctorListApi({
					name: '',
					pageNum: 1,
					pageSize: 1000,
					hospital: '',
					department: '中医科'
				})
				if(res.data.records.length > 3) {
					this.doctorList.push(...res.data.records.slice(0, 3))
				} else {
					this.doctorList.push(...res.data.records)
				}
				
			},
			// 跳转详情
			toDetail(item) {
				uni.navigateTo({
					url: '/subpkg/detail/detail'
				})
			},
		},
	}
</script>
<style>
	page {
		background: #f8f8f8;
	}
</style>
<style lang="scss" scoped>
.common_box{
		position: relative;
		background: #fff;
		border-radius: 32rpx;
		margin-bottom: 32rpx;
		.topheader{
			position: absolute;
			border-top-left-radius: 32rpx;
			border-top-right-radius: 32rpx;
			width: 100%;
			height: 106rpx;
			opacity: 0.4;
			background: linear-gradient(180deg, rgba(48,202,181,0.25) 0%, rgba(255,255,255,0) 100%);
		}
	}
	.top_box {
		margin:32rpx 32rpx;
		border-radius: 32rpx;
		height: 340rpx;
		border-radius: 32rpx;

		.title {
			font-size: 32rpx;
			color: #313131;
		}
	}

	.cate_list {
		margin: 32rpx 0;
		padding-bottom: 48rpx;

		.cate_user {
			flex: 1;
			.cate_icon {
				width: 120rpx;
				height: 120rpx;
				margin-bottom: 10rpx;
				border-radius: 50%;
			}

			.cate_user_name {
				font-weight: bold;
				font-size: 26rpx;
				color: #202020;
			}

			.cate_user_addr {
				font-size: 24rpx;
				color: #898989;
				margin-top: 6rpx;
			}
		}

	}

	.list_box {
		margin-top: 32rpx;

		.card_item {
			margin-bottom: 32rpx;

			.left {
				flex: 1;

				.title {
					font-weight: bold;
					font-size: 32rpx;
					color: #000000;
				}

				.username {
					margin-top: 14rpx;
					font-size: 24rpx;
					color: #9A9A9A;
				}

				.cate {
					font-size: 20rpx;
					color: #8F8F8F;
				}

				.viewBtn {
					width: 160rpx;
					height: 58rpx;
					background: #3FBEBB;
					color: #fff;
					font-size: 24rpx;
					border-radius: 37rpx;
				}
			}

			.right {
				width: 240rpx;
				height: 180rpx;
				margin-right: 32rpx;
				position: relative;
				image {
					border-radius: 16rpx;
					width: 100%;
					height: 100%;
				}
				video{
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
				}
				.video_text{
					position: absolute;
					top: -4rpx;
					width: 240rpx;
					height: 180rpx;
					.video_text_box{
						width: 50%;
						color: #438D83;
						font-size: 24rpx;
						
					}
				}
			}
		}
	}

	.main_box {
		height: 100%;
		border-radius: 32rpx;
		margin: 0 32rpx 32rpx;
	}
</style>